<!DOCTYPE html>
<html class="login-bg" style="background-image: url({{env('IMAGE_DOMAIN')}}images/shop/bgs/landscape.jpg);">
<head>
	<title>翻贝网商家后台</title>
    <meta name="keywords" content="翻倍花，O2O，第三方推广，服务平台">
    <meta name="description" content="翻贝网致力于打造国内最具公信力的第三方推广和服务平台">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut  icon" type="image/x-icon" href="{{ env('IMAGE_DOMAIN') }}images/icon.png" media="screen"  />
    <!-- bootstrap -->
    <link href="{{env('CSS_DOMAIN')}}css/bootstrap/bootstrap.css" rel="stylesheet">
    <link href="{{env('CSS_DOMAIN')}}css/bootstrap/bootstrap-overrides.css" type="text/css" rel="stylesheet">
    <!-- global styles -->
    <link href="{{env('CSS_DOMAIN')}}css/compiled/layout.css" rel="stylesheet" type="text/css">
    <link href="{{env('CSS_DOMAIN')}}css/compiled/elements.css" rel="stylesheet" type="text/css" >
    <link href="{{env('CSS_DOMAIN')}}css/compiled/icons.css" rel="stylesheet" type="text/css">
    <!-- libraries -->
    <link href="{{env('CSS_DOMAIN')}}css/lib/font-awesome.css" rel="stylesheet" type="text/css">
    <!-- this page specific styles -->
    <link href="{{env('CSS_DOMAIN')}}css/compiled/signin.css" rel="stylesheet" type="text/css" media="screen" />

    <style>
        .login-wrapper .title{overflow: hidden;width: 320px;margin: 0 auto 50px;}
        .login-wrapper .title img{float: left;width: 50px;height: 50px;}
        .login-wrapper .title h1{float: left;margin-left: 10px;}
        .login_way{overflow: hidden;margin-bottom: 30px;}
        .login_way span:nth-child(1){float: left;}
        .login_way span:nth-child(2){float: right;color: #9955c6;cursor: pointer;}
        .get_code{float: left;width: 100px;height: 40px;background-color: #eee;line-height: 40px;border-radius: 5px;color: #9955c6;margin-left: 25px;cursor: pointer;border: 1px solid #b2bfc7;}
        .phone_login{display: none;}
        .wrong_message{color: red;margin-bottom: 10px;}
    </style>
</head>
<body>
    <div class="login-wrapper">
        <div class="title">
            <img src="{{env('IMAGE_DOMAIN')}}images/shop/bgs/login.png" alt="">
            <h1 style="font-family: '时尚中黑简体'">翻贝网商家后台</h1>
        </div>
        <div class="box">
            <form class="password_login" action="/shop/login/submit" method="post">
                <div class="content-wrap">
                    <p class="login_way">
                        <span>账号密码登录</span>
                        <span>验证码快捷登录</span>
                    </p>
                    <input maxlength="11" class="form-control" type="text" name="mobile" placeholder="手机号码">
                    <input class="form-control" type="password" name="password" placeholder="登录密码">
                    <input type="hidden" name="type" value="password" />
                    @if(isset($message))
                        <p class="wrong_message">{{$message}}</p>
                    @endif
                    <!-- <a href="#" class="forgot">忘记密码?</a>
                    <div class="remember">
                        <input id="remember-me" type="checkbox">
                        <label for="remember-me">记住密码</label>
                    </div> -->
                    <input style="background: #9955c6;" type="submit" class="btn-glow primary login" id="submit_login" value="登录" />
                </div>
            </form>
            <form class="phone_login" action="/shop/login/submit" method="post">
                <div class="content-wrap">
                    <p class="login_way">
                        <span>验证码快捷登录</span>
                        <span>账号密码登录</span>
                    </p>
                    <input maxlength="11" class="form-control mobile" type="text" name="mobile" placeholder="手机号码">
                    <p style="overflow: hidden;">
                        <input style="float: left;width: 200px;" class="form-control" type="text" name="code" placeholder="验证码">
                        <span class="get_code">获取验证码</span>
                    </p>
                    <input type="hidden" name="type" value="code" />
                    @if(isset($message))
                        <p class="wrong_message">{{$message}}</p>
                    @endif
                    <p class="wrong_message" style="display: none;"></p>
                    <!-- <a href="#" class="forgot">忘记密码?</a>
                    <div class="remember">
                        <input id="remember-me" type="checkbox">
                        <label for="remember-me">记住密码</label>
                    </div> -->
                    <input style="background: #9955c6;" type="submit" class="btn-glow primary login" id="phone_login" value="登录" />
                </div>
            </form>
        </div>
    </div>

	<!-- scripts -->
    <script  src="{{env('JS_DOMAIN')}}js/jquery-1.11.1.min.js?v={{env('JS_VERSION')}}" type="text/javascript"></script>
    <script src="{{env('JS_DOMAIN')}}js/bootstrap.min.js"></script>
    <script src="{{env('JS_DOMAIN')}}js/theme.js"></script>

    <!-- pre load bg imgs -->
    <script type="text/javascript">
        var type='{{$type}}';
        if(type == 'password'){
            $(".password_login").show();
            $(".phone_login").hide();
        }else{
            $(".phone_login").show();
            $(".password_login").hide();
        }
        $(function () {
            // bg switcher
            var $btns = $(".bg-switch .bg");
            $btns.click(function (e) {
                e.preventDefault();
                $btns.removeClass("active");
                $(this).addClass("active");
                var bg = $(this).data("img");

                $("html").css("background-image", "url('{{env('IMAGE_DOMAIN')}}images/shop/bgs/" + bg + "')");
            });
        });
        $(".password_login .login_way span").eq(1).click(function(){
            $(".phone_login").show();
            $(".password_login").hide();
        })
        $(".phone_login .login_way span").eq(1).click(function(){
            $(".phone_login").hide();
            $(".password_login").show();
        })
        var get_code_timer=1;
        var countdown = 60;
        $(".get_code").click(function(){
            var mobile=$(".mobile").val();
            if(get_code_timer == 1){
                if(mobile == ''){
                    alert("请填入手机号");return false;
                }else{
                   $.ajax({
                        url:"/shop/login/code/get",
                        data:{
                            'mobile':mobile
                            },
                        async:false,
                        success:function(data){
                            if(data.status == 'success'){
                                var timer = setInterval(function(){
                                    if(countdown == 0){
                                        $(".get_code").html("重新获取验证码");
                                        get_code_timer=1;
                                        countdown = 60;
                                        clearInterval(timer)
                                    }else{
                                        countdown--;
                                        $(".get_code").html(countdown+'秒');
                                        get_code_timer=0;
                                    }
                                },1000)
                            }else{
                                $('.wrong_message').show();
                                $('.wrong_message').html(data.message);
                            }
                        }
                    });
                }
            }
                
        })
       // $("#submit_login").click(function() {
       //     var mobile = $("input[name='mobile']").val();
       //     var password = $("input[name='password']").val();
       //     var type = $("input[name='type']").val();
       //     $.ajax({
       //         url :"/shop/login/submit",
       //         type:'POST',
       //         data : {
       //             mobile:mobile,
       //             password:password,
       //             type:type
       //         },
       //         dataType:'json',
       //         async:false,
       //         success:function(data){
       //             if (data.status == "success") {
       //                 //alert(data.message);
       //             } else {
       //                  $(".wrong_message").show;
       //                  $(".wrong_message").html(data.message);
       //             }
       //         }
       //     });
       // });
    </script>
</body>
</html>